<template>
  <el-dialog title="加工进度详情" :visible.sync="showDialog" top="0" :close-on-click-modal="false" width="90%" @close="cancel">
    <div v-if="selectedItem !== null" class="info-list">
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            加工作业名称
          </template>
          {{ selectedItem.taskName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            所属产线
          </template>
          {{ selectedItem.productLineName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            预期加工量
          </template>
          {{ selectedItem.processingVolume }} {{ selectedItem.product.unitName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            当前加工量
          </template>
          {{ nowNum || 0 }} {{ selectedItem.product.unitName }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <p>加工进度上报记录</p>
    <div class="table-wrapper">
      <el-table :data="tableData" stripe border height="300px">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="num" label="当前完成加工量" width="150">
          <template v-if="!('index' in scope.row)" slot-scope="scope"> {{ scope.row.num || 0 }} {{ selectedItem.product.unitName }} </template>
        </el-table-column>
        <el-table-column prop="increment" label="新增">
          <template v-if="!('index' in scope.row)" slot-scope="scope"> {{ scope.row.increment || 0 }} {{ selectedItem.product.unitName }} </template>
        </el-table-column>
        <el-table-column prop="name" label="上报人" width="150" />
        <el-table-column prop="reportTime" label="上报时间" width="200">
          <template v-if="!('index' in scope.row)" slot-scope="scope">
            {{ scope.row.reportTime | formateTime }}
          </template>
        </el-table-column>
      </el-table>
      <Pagination :light="true" :page-size="pageSize" :current-page="currentPage" :total-size="totalSize" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="savebtn" @click="cancel()">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import api from '@/api/processing-management/process-task-manage/index';
import { getToken } from '@/utils/auth';
import Pagination from '@/components/Pagination';
import moment from 'moment';
export default {
  components: { Pagination },
  filters: {
    formateTime: function(value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  props: {
    value: Boolean,
    selectedItem: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formDataDefault: {},
      formData: {},
      saveLoading: false,
      showDialog: false,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      tableData: [],
      tableDataAll: [],
      nowNum: ''
    };
  },
  computed: {},
  watch: {
    value(v) {
      this.showDialog = v;
      if (v) {
        this.init();
      }
    }
  },
  created() {
    this.reset();
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = JSON.parse(JSON.stringify(this.formDataDefault));
    },
    init() {
      const { selectedItem, formData } = this;
      if (selectedItem) {
        for (const key in formData) {
          if (Object.hasOwnProperty.call(formData, key)) {
            formData[key] = selectedItem[key];
          }
        }

        this.getTaskProgress();
      }
    },
    save() {
      const { formData, selectedItem, actTaskAccessoryList, actTaskRawMaterialList, type } = this;
      const paylod = JSON.parse(JSON.stringify(formData));
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.saveLoading = true;
          paylod.endTime = this.$moment(paylod.endTime).format('YYYY-MM-DD HH:mm:ss');
          paylod.suspendEndTime = this.$moment(paylod.suspendEndTime).format('YYYY-MM-DD HH:mm:ss');
          paylod.taskId = selectedItem.taskId;
          paylod.taskAccessoryList = actTaskAccessoryList;
          paylod.taskRawMaterialList = actTaskRawMaterialList;
          paylod.personNo = getToken('personNo');
          paylod.name = getToken('username');
          const postApi = type === 'done' ? api.completeTask : api.suspendTask;
          postApi(paylod)
            .then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg);
                this.close();
                this.$emit('reflash');
              }
            })
            .finally(_ => {
              this.saveLoading = false;
            });
        }
      });
    },
    getTaskProgress() {
      const { selectedItem } = this;
      this.loading = true;
      api
        .getTaskProgress({ taskId: selectedItem.taskId })
        .then(res => {
          if (res.code === 1) {
            this.tableDataAll = res.data.reverse();
            if (this.tableDataAll.length !== 0) {
              this.nowNum = this.tableDataAll[0].num;
            }
            this.getList();
          }
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    getList() {
      const { tableDataAll, currentPage, pageSize } = this;
      this.totalSize = tableDataAll.length;
      // 计算当前页应该显示的数据的起始索引
      const startIndex = (currentPage - 1) * pageSize;

      // 计算当前页应该显示的数据的结束索引
      const endIndex = startIndex + pageSize;

      // 使用 slice 方法获取当前页的数据
      const currentPageData = tableDataAll.slice(startIndex, endIndex);
      this.tableData = this.$utils.addblankmet(currentPageData, pageSize);
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getList();
    },
    close() {
      setTimeout(() => {
        this.reset();
      }, 250);
      this.$emit('input', false);
    },
    cancel() {
      setTimeout(() => {
        this.reset();
      }, 250);
      this.$emit('input', false);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  min-height: 36px;
  align-items: center;
}
::v-deep {
  .el-descriptions .is-bordered .el-descriptions-item__cell {
    border-color: #000;
    color: #000;
  }
  .el-descriptions-item__label {
    font-weight: bold !important;
  }
}
.table-wrapper {
  position: relative;
  padding-bottom: 50px;
  box-sizing: border-box;
}
</style>
